<template>
    <div>
        <div class="text-12px pl-35px py-11px lh-12px" style="border-top: 1px solid #2f2f2f">
            关注列表
            <span class="text-9px text-#cecece ml-3px">( 128成员 50游戏 )</span>
        </div>

        <div class=" bg-#3f3f3f py-12px text-12px">
            <!-- 关注的用户 -->
            <div class="px-35px mb-5px">
                我关注的用户
            </div>
            <div class="pl-35px flex gap-10px overflow-auto">
                <div v-for="item in interestUser" :key="item.name" class="relative">
                    <img src="@/assets/interest-avatar.webp" alt="" class="w-90px h-90px rounded-full">
                    <img src="@/assets/like.webp" alt="" class="w-22px h-22px absolute top-0 right-0">
                    <div class="absolute bottom-20px left-0 w-full flex flex-col justify-center items-center gap-3px">
                        <div class="text-9px lh-9px">
                            {{ item.name }}
                        </div>
                        <div class="text-7px lh-7px text-#a4a4a4">
                            · 已注册{{ item.day }}天
                        </div>
                        <div class="text-7px lh-7px text-#a4a4a4">
                            · 已玩游戏{{ item.game }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 关注的游戏 -->
            <div class="px-35px mb-5px">
                我关注的游戏
            </div>
            <div class="px-35px space-y-20px">
                <div v-for="item in interestGame" :key="item.name"
                     class="relative bg-#2f2f2f rounded-full p-4px flex items-center w-full">
                    <img src="@/assets/like.webp" alt="" class="w-22px h-22px absolute top-0 left-0">
                    <img src="@/assets/game-avatar.webp" alt="" class="w-60px h-60px rounded-full">
                    <div class="text-12px ml-10px">
                        <div class="text-#a7a7a7">
                            {{ item.name }}
                        </div>
                        <div class="underline text-#4cb4fc">
                            前往游戏讨论版
                        </div>
                    </div>
                    <div class="flex-1 text-right pr-8px">
                        <nut-button class="!w-80px !h-25px !bg-#ea49a7 !border-none !text-#fff !font-bold !text-12px">
                            下载
                        </nut-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// 关注的用户
const interestUser = [
    { name: '黄油小郎君', day: '188', game: '78' },
    { name: '黄油小郎君', day: '188', game: '78' },
    { name: '黄油小郎君', day: '188', game: '78' },
    { name: '黄油小郎君', day: '188', game: '78' },
    { name: '黄油小郎君', day: '188', game: '78' }
]
// 关注的游戏
const interestGame = [
    { name: 'SLUTS' },
    { name: 'SLUTS' },
    { name: 'SLUTS' }
]
</script>

<style scoped></style>
